<template>
    <div>
        <el-form label-position="left" label-width="100px" v-model="baseTable">
            <el-form-item label="边框">
              <el-radio v-model="baseTable.border" :label="true">有</el-radio>
              <el-radio v-model="baseTable.border" :label="false">无</el-radio>
            </el-form-item>
            <el-form-item label="斑马纹">
              <el-radio v-model="baseTable.stripe" :label="true">有</el-radio>
              <el-radio v-model="baseTable.stripe" :label="false">无</el-radio>
            </el-form-item>
            <el-form-item  label="尺寸">
               <el-select v-model="baseTable.size" placeholder="medium" size="mini">
                <el-option label="中等" value="medium"/>
                <el-option label="小" value="small"/>
                <el-option label="迷你" value="mini"/>
              </el-select>
            </el-form-item>
            <el-form-item  label="对齐方式">
               <el-select v-model="baseTable.align" placeholder="center" size="mini">
                <el-option label="居中" value="center"/>
                <el-option label="左对齐" value="left"/>
                <el-option label="右对齐" value="right"/>
              </el-select>
            </el-form-item>
            <el-form-item label="表头颜色">
              <el-color-picker v-model="baseTable.headerColor" show-alpha size="small" @active-change="headerColor"></el-color-picker>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
  data: function () {
    return {
      key: 1,
      drawer: false
    }
  },
  methods: {
    headerColor (val) {
      this.baseTable.headerColor = val
    }
  },
  computed: {
    baseTable () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.baseTable
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
    .el-form-item {
        margin-bottom: 0px
    }
</style>
